<template>
	<view class="mainpadding beijingse" v-if="pageShow">
		<view class="" style="padding-bottom: 140rpx;">
			<view class="mainpadding ffffff radius">
				<!-- 1=待支付,2=待发货,3=待收货,4=待评论,5=售后订单(已弃用),6=已完成,7=已取消,8=取消审核中 -->
				<view class="" v-if="dataAll.state==1">
					<view class="flexleft">
						<view class="margin_right1">
							<u-icon name="clock-fill" color="#2361FF" size="24"></u-icon>
						</view>
						<view class="xiaohei fonweight bigtext">等待支付</view>
					</view>
					<view class="flexleft margin_top2">
						<view class="strongtext xiaohei ">系统将会在</view>
						<view class="strongtext xiaolan ">{{httpRequest.timereturn(dataAll.expire_tme*1000)}}</view>
						<view class="strongtext xiaohei ">后自动关闭</view>
					</view>
				</view>
				<!--待发货  -->
				<view class=""  v-if="dataAll.state==2">
					<view class="flexleft">
						<view class="margin_right1">
							<u-icon name="clock-fill" color="#2361FF" size="24"></u-icon>
						</view>
						<view class="xiaohei fonweight bigtext">等待发货</view>
					</view>
					<view class="strongtext xiaohei margin_top2">等待卖家发货</view>
				</view>
				<!--等待收货  -->
				<view class=""  v-if="dataAll.state==3">
					<view class="flexleft">
						<view class="margin_right1">
							<u-icon name="clock-fill" color="#2361FF" size="24"></u-icon>
						</view>
						<view class="xiaohei fonweight bigtext">等待收货</view>
					</view>
					<view class="strongtext xiaohei margin_top2">商品已发货，等待确认收货中</view>
				</view>
				<!--等待评价  -->
				<view class="" v-if="dataAll.state==6 && dataAll.comment_status==10">
					<view class="flexleft">
						<view class="margin_right1">
							<u-icon name="clock-fill" color="#2361FF" size="24"></u-icon>
						</view>
						<view class="xiaohei fonweight bigtext">等待评价</view>
					</view>
					<view class="strongtext xiaohei margin_top2">商品已收货，等待评价中</view>
				</view>
				<!-- 订单已取消 -->
				<view class="" v-if="dataAll.state==7">
					<view class="flexleft">
						<view class="margin_right1">
							<u-icon name="close-circle-fill" color="#FE4B4B" size="24"></u-icon>
						</view>
						<view class="xiaohei fonweight bigtext">订单已取消</view>
					</view>
					<view class="strongtext xiaohei margin_top2">订单已关闭</view>
				</view>
				<!--订单已完成  -->
				<view class="" v-if="dataAll.state==6 && dataAll.comment_status==20">
					<view class="flexleft">
						<view class="margin_right1">
							<u-icon name="clock-fill" color="#2361FF" size="24"></u-icon>
						</view>
						<view class="xiaohei fonweight bigtext">订单已完成</view>
					</view>
					<view class="strongtext xiaohei margin_top2">订单已完成</view>
				</view>
			</view>
			<!-- 地址 -->
			<view class="ffffff radius mainpadding ffffff margin_top2">
				<view class="sanshier xiaohei fonweight">收货地址</view>
				<view class="sanshier margin_top2 xiaohei fonweight">{{dataAll.address.address}}</view>
				<view class="flexleft margin_top2">
					<view class="ershiba  margin_right2">{{dataAll.address.name}}</view>
					<view class="ershiba ">{{dataAll.address.mobile}}</view>
				</view>
			</view>
			<!--快递单号  -->
			<template v-if="dataAll.express_no">
				<view class="ffffff radius mainpadding ffffff margin_top2">
					<view class="sanshier xiaohei fonweight">{{dataAll.express_name}}</view>
					<view class="flexbetween margin_top2">
						<view class="ershiba xiaohei ">{{dataAll.express_no}}</view>
						<image class="fuzhi" src="../static/image/system/fz1.png" mode="" @click="copy(dataAll.express_no)"></image>
					</view>
				</view>
			</template>

			<!-- 商品信息 -->
			<view class="margin_top2 ffffff radius mainpadding">
				<view class="shangbj" v-for="item in dataAll.goods" :key="item.id">
					<view class="flexbetween">
						<image class="sptp" :src="item.image_text" mode=""></image>
						<view class="" style="width: 67%;">
							<view class="ershiba fonweight yhxk">{{item.title}}</view>
							<view class="strongtext xiaohui yhxk margin_top2">{{item.difference}}</view>
							<view class="flexbetween margin_top4" >
								<view class="strongtext fonweight"v-if="dataAll.order_type==1">￥
									<text class="bigtext fonweight">{{item.price}}</text>
								</view>
								<view class="strongtext fonweight" v-if="dataAll.order_type==2">
									<text class="bigtext fonweight">{{item.price}}积分</text>
								</view>
								<view class="ershiba xiaohui">×{{item.number}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="margin_top2 ffffff radius mainpadding">
				<view class="flexbetween">
					<view class="ershiba xiaohui">总价格</view>
					<view class="strongtext fonweight" v-if="dataAll.order_type==1">￥
						<text class="bigtext fonweight">{{dataAll.total_price}}</text>
					</view>
					<view class="strongtext fonweight" v-if="dataAll.order_type==2">
						<text class="bigtext fonweight">{{dataAll.total_price}}积分</text>
					</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="ershiba xiaohui">优惠</view>
					<view class="strongtext fonweight">￥
						<text class="bigtext fonweight">{{dataAll.coupon_price}}</text>
					</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="ershiba xiaohui">运费</view>
					<view class="ershiba">{{Number(dataAll.freight_price)?dataAll.freight_price:"包邮"}}</view>
				</view>
				<view class="flexbetween xiahuaxian margin_top" v-if="dataAll.state!=1 && dataAll.state!=7">
					<view class="ershiba xiaohui">实付款</view>
					<view class="strongtext fonweight xiaohong" v-if="dataAll.order_type==1">￥
						<text class="bigtext fonweight xiaohong">{{dataAll.pay_price}}</text>
					</view>
					<view class="strongtext fonweight xiaohong" v-if="dataAll.order_type==2">
						<text v-if="Number(dataAll.pay_price)">
							￥<text class="bigtext fonweight xiaohong">{{dataAll.pay_price}}</text>
						</text>
						<text class="bigtext fonweight xiaolan" v-if="Number(dataAll.score)"><text v-if="Number(dataAll.pay_price)">+</text>{{dataAll.score}}积分</text>
					</view>
				</view>
				<view class="flextop margin_top" v-if="dataAll.remarks">
					<view class="ershiba xiaohui">订单备注</view>
					<view class="ershiba" style="width: 400rpx;">{{dataAll.remarks}}</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="ershiba xiaohui">订单编号</view>
					<view class="ershiba">{{dataAll.order_no}}</view>
				</view>
				<view class="flexbetween margin_top" v-if="dataAll.state!=1 && dataAll.state!=7">
					<view class="ershiba xiaohui">支付时间</view>
					<view class="ershiba">{{httpRequest.timereturn(dataAll.pay_time*1000)}}</view>
				</view>
				<view class="flexbetween margin_top" v-if="dataAll.state!=1 && dataAll.state!=7 && dataAll.pay_price!=0">
					<view class="ershiba xiaohui">支付方式</view>
					<view class="ershiba">{{dataAll.pay_type_text}}</view>
				</view>
			</view>
		</view>
		<!-- 1=待支付,2=待发货,3=待收货,4=待评论,5=售后订单(已弃用),6=已完成,7=已取消,8=取消审核中 -->
		<view class="ffffff mainpadding gudingdb flexright" v-if="dataAll.state==1|| dataAll.state==2 || dataAll.state==3 || dataAll.state==4|| dataAll.state==6 || dataAll.state==7">
			<view class="bkbtn flexcenter margin_left2"  v-if="dataAll.state==1 || dataAll.state==2" @click.stop="showModal('确认取消当前订单吗？',dataAll.id)">取消订单</view>
			<view class="lanbtn flexcenter margin_left2" v-if="dataAll.state==1" @click.stop="payorder(dataAll)">立即付款</view>
			<view class="lanbtn flexcenter margin_left2" v-if="dataAll.state==3" @click.stop="showModal('是否确认收货？',dataAll.id)">确认收货</view>
			<view class="lanbtn flexcenter margin_left2" v-if="dataAll.state==6 && dataAll.comment_status==10" @click.stop="lijipj(dataAll.id)">立即评价</view>
			<view class="bkbtn flexcenter margin_left2" v-if="dataAll.state==7 || (dataAll.state==6 && dataAll.comment_status==20)" @click.stop="showModal('确认删除当前订单吗？',dataAll.id)">删除订单</view>
		</view>
		<moDal :message="modal" @modalSure="modalSure" @modalcancel="modalcancel"></moDal>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				listid: "",
				modal: {
					modalShow: false,
					title: "是否确认退出登录？",
				},
				currentid: "",
				dataAll: {},
				httpRequest,
				pageShow: false
			}
		},
		onLoad(options) {
			this.listid = options.id
		},
		onShow() {
			this.getDetail()
		},
		methods: {
			getDetail() {
				httpRequest.request('/api/order/getOrderInfo', 'GET', {
					id: this.listid
				}, false, false, true).then(res => {
					this.dataAll = res.data
					this.pageShow = true
				})
			},
			shouhuo(id) {
				httpRequest.request('/api/order/confirmOrder', 'POST', {
					id
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.getDetail()
					}
				})
			},
			delitem(id) {
				httpRequest.request('/api/order/delOrder', 'POST', {
					id
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						uni.navigateBack(1)
					}
				})
			},
			payorder(item) {
				let obj = {
					order_id:item.id,
					pay_price: item.pay_price,
				}
				uni.navigateTo({
					url: '/pages_homepage/zhifudd?msg=' + encodeURIComponent(JSON
						.stringify(obj))
				})
			},
			cancelitem(order_id) {
				httpRequest.request('/api/order/cancelOrder', 'GET', {
					order_id
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.getDetail()
					}
				})
			},
			showModal(text, id) {
				this.currentid = id
				this.modal.title = text
				this.modal.modalShow = true
			},
			modalSure() {
				if (this.modal.title == "确认取消当前订单吗？") {
					this.cancelitem(this.currentid)
				} else if (this.modal.title == "确认删除当前订单吗？") {
					this.delitem(this.currentid)
				} else if (this.modal.title == "是否确认收货？") {
					this.shouhuo(this.currentid)
				}
				this.modalcancel()
			},
			modalcancel() {
				this.modal.modalShow = false
			},
			// 跳转立即评价
			lijipj(id) {
				uni.navigateTo({
					url: '/pages_mypage/lijipj?id='+id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.lanbtn {
		width: 193rpx;
		height: 68rpx;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		background-color: #2361FF;
		border: 1rpx solid #2361FF;
	}

	.bkbtn {
		width: 193rpx;
		height: 68rpx;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #7A7C94;
		border: 1rpx solid #B5BFDA;
	}

	.fuzhi {
		width: 28rpx;
		height: 30rpx;
	}

	.xhbtn {
		font-size: 18rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FF0000;
		width: 72rpx;
		height: 32rpx;
		border-radius: 5rpx 5rpx 5rpx 5rpx;
		border: 1rpx solid #FF0000;
	}

	.yhbjt {
		padding: 36rpx 32rpx 10rpx 35rpx;
		background-size: 100% 100%;
		background-image: url('@/static/image/system/yhq.png');
	}

	.shangbj {
		margin-top: 30rpx;
	}

	.shangbj:first-child {
		margin-top: 0rpx;
	}

	.biak {
		width: 1rpx;
		height: 47rpx;
		background-color: #D2D2D2;
	}

	.jianbox {
		width: 178rpx;
		height: 48rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		border: 1rpx solid #D2D2D2;
	}

	.sptp {
		width: 196rpx;
		height: 196rpx;
		border-radius: 15rpx;
	}

	.shangbj {
		margin-top: 30rpx;
	}

	.mrbtn {
		font-size: 20rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		width: 65rpx;
		height: 28rpx;
		background: #2361FF;
		border-radius: 16rpx 2rpx 16rpx 16rpx;
	}
</style>